<template>
	<view class="bindingcard_counter">
		<!-- 标题 -->
		<view class="title">
			<text>请输入持卡本人信息</text>
		</view>
		<!-- 详细形象 -->
		<view class="info">
			<view class="conter">
				<view class="box1">
					<text>持卡人姓名</text>
					<input type="text" value="" />
				</view>
				<view class="box2">
					<view class="top">
						<text>卡号</text>
						<u-icon name="camera" style="color: #adcdfd;"></u-icon>
					</view>
					<view class="bo">
						<input type="text" value="" />
					</view>
				</view>
				<view class="box3">
					<image src="../../static/iamges/open_2.png" mode="widthFix"></image>
					<text class="t1">中国工商银行</text>
					<text class="t2">储蓄卡</text>
				</view>
				<view class="box4">
					<text>手机号</text>
					<input type="text" value="" />

				</view>
				<view class="box5">
					<label class="radio">
						<radio value="" :checked="isRadio" @click="isRadio=!isRadio" />
						<text class="title1">同意</text>
						<text class="title2">《服务协议》</text>
					</label>
				</view>
				<view class="box6" @click="diffCard">
					<text>验证银行卡</text>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="foot">
			<u-icon name="fingerprint" style="color: #007AFF;"></u-icon>
			<text style="color:#dfdfdf;margin-left: 16rpx;">信息已加密,仅仅用于验证登录</text>
		</view>
		<!--完善形象 -->
		<u-popup mode="center" v-model="isOpenAnCcount" :zoom="true" :closeable="false" width="640rpx" height="474rpx"
			border-radius=20>
			<view class="content">
				<text class="title">输入短信验证码</text>
				<view class="r">
					<text class="title2">短信验证码已发送</text>
				</view>
				<view class="center_open">
					<u-message-input mode="bottomLine" font-size=30></u-message-input>
					<view class="wrap">
						<u-toast ref="uToast"></u-toast>
						<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
							@change="codeChange"></u-verification-code>
						<u-button @tap="getCode">{{tips}}</u-button>
					</view>
				</view>
				<view class="confrim-btn" style="display: flex;">

					<button class="queding" type="default" @click="isOpenAnCcount = false;">取消</button>
					<button class="quxiao" type="default" @click="goto">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRadio: false, //判断单选按钮是否被选中
				isOpenAnCcount: false, //点击开户按钮判断是否需要弹出
				tips: '',
				// refCode: null,
				seconds: 60,
			}
		},
		methods: {
			// 绑定银行卡跳转到bankcard
			goto(){
				this.isOpenAnCcount= false;
				uni.navigateTo({
					url:"/pages/bankcard/bankcard"
				})
			},
			diffCard() {
				this.isOpenAnCcount = true
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				this.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bindingcard_counter {
		background-color: #fafafa;
		height: 100vh;

		.title {
			padding: 40rpx 40rpx;

			text {
				color: #949494;
				font-size: 30rpx;
			}
		}

		.info {
			//border: 1px solid red;
			padding: 0 40rpx;

			.conter {
				font-size: 30rpx;
				background-color: #ffffff;
				border-radius: 15rpx;
				padding: 20rpx 20rpx;

				.box1 {
					display: flex;
					padding: 20rpx 20rpx;
					border-bottom: 1px solid #ebebeb;

					input {
						padding: 0 20rpx;
						color: #999999;
					}
				}

				.box2 {
					padding: 26rpx 20rpx;
					border-bottom: 1px solid #ebebeb;

					.top {
						display: flex;
						justify-content: space-between;
					}

					.bo {
						margin-top: 10rpx;

						input {
							color: #999999;
						}
					}
				}

				.box3 {
					display: flex;
					align-items: center;
					padding: 20rpx 20rpx;
					border-bottom: 1px solid #ebebeb;

					image {
						width: 80rpx;
					}

					.t1 {
						font-size: 32rpx;
						margin-left: 19rpx;
					}

					.t2 {
						font-size: 28rpx;
						color: #999999;
						margin-left: 50rpx;
						margin-top: 6rpx;
					}
				}

				.box4 {
					display: flex;
					padding: 26rpx 20rpx;
					border-bottom: 1px solid #ebebeb;

					input {
						padding: 0 20rpx;
						color: #999999;
					}
				}

				.box5 {
					padding: 26rpx 20rpx;

					.radio {
						radio {
							transform: scale(0.7);
						}

						.title1 {
							margin-left: 10rpx;


						}

						.title2 {

							color: #ff5263;
							margin-left: 10rpx;
						}
					}
				}

				.box6 {
					background-color: #ff4658;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 26rpx 0;
					border-radius: 10rpx;
				}
			}
		}

		.foot {
			position: fixed;
			bottom: 4%;
			//border: 1px solid red;
			left: 22%;
			font-size: 30rpx;
			padding: 10rpx 0;

		}

		.content {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			//border: 1px solid red;
			height: 100%;

			.title {
				font-size: 36rpx;
				font-weight: 550;
				margin-top: 0rpx;
			}

			.r {

				//border: 1px solid red;
				.title2 {}
			}

			.confrim-btn {
				width: 100%;
				justify-content: space-around;
				height: 100rpx;
				border-top: 1px solid #efefef;

				button {
					width: 50%;
					background-color: #ffffff;
				}

				button::after {
					border: none;
				}

				.quxiao::after {
					border-left: 1px solid #efefef;
				}

				.queding {
					color: #999999;
					font-size: 36rpx;
				}

				.quxiao {
					color: #ff4658;
					font-size: 36rpx;
				}
			}

			.input {
				height: 100rpx;
			}

			.center_open {
				//padding: 10rpx 20rpx;
				color: #999999;
				color: 28rpx;

				//display: flex;
				.wrap {
					padding: 0;
				}
			}
		}
	}
</style>
